<template>
	<div class="custom-box flex_row">
		<div class="left-box">
			<loadList :currentMenu="currentMenu" :propData="propData" @change="changeHandle"></loadList>
		</div>
		<div class="right-box">
			<customForm 
				ref="customFormRef" 
				:currentMenu="currentMenu" 
				:propData="propData"
				:print_tpl_id="print_tpl_id">
			</customForm>
		</div>
	</div>
</template>
<script setup>
import {
	ref,
	onMounted,
	onBeforeUnmount,
	nextTick,
	defineExpose,
	computed,
	defineProps,
	defineEmits,
	getCurrentInstance
} from '@vue/composition-api'
const { proxy } = getCurrentInstance()
import loadList from './loadList.vue'
import customForm from './customForm.vue'

const props = defineProps({
	currentMenu: {
		type: Object,
		default: () => { }
	},
	propData: {
		type: Object,
		default: () => { }
	}
})

const customFormRef = ref(null)
const handleAdd = () => {
	customFormRef.value.handleAddTplDetail()
}

const print_tpl_id = ref('')
const changeHandle = (id) => {
	print_tpl_id.value = id
}

defineExpose({
	handleAdd
})

</script>

<style scoped lang="scss">
.custom-box {
	height: 100%;
	align-items: flex-start;
}

.left-box,
.right-box {
	box-sizing: border-box;
	height: 100%;
	padding: 0 10px 0 0;
}

.left-box {
	width: 250px;
	border-right: 1px solid #e1e8ed;
}

.right-box {
	flex: 1;
	padding: 0 10px;
	padding-right: 0;
}
</style>